<template>
  <div class="home">
    <Metrics></Metrics>
    <IpMetrics></IpMetrics>
    <HostMetrics></HostMetrics>
    <UserAgentMetrics></UserAgentMetrics>
  </div>
</template>
<script lang="ts" setup>
import Metrics from './metrics/index.vue'
import IpMetrics from './ipMetrics/index.vue'
import HostMetrics from './host/index.vue'
import UserAgentMetrics from './userAgent/index.vue'
</script>

<style lang="less">
.home {
  .qn-card {
    .ant-card-head {
      border: 0;
    }
    .ant-card-body {
      padding: 4px;
    }
  }
  .metrics-btn {
    margin-bottom: 15px;
  }
  .ip-metrics {
  }
  .metrics {
    .metrics-imte {
      min-width: 180px;
      width: 100%;
      box-shadow: 0 6px 12px 0 rgba(41, 48, 55, 0.08);
      background-color: #ffffff;
      border-radius: 6px;
      padding: 8px;
      .metrics-imte-title {
        color: @colorTextTertiary;
        font-size: 12px;
        line-height: 30px;
      }
      .metrics-imte-metrics {
        font-weight: bold;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .metrics-imte-metrics-l {
          color: var(--colorPrimary);
        }
        .metrics-imte-metrics-r {
          color: @colorText;
          padding-right: 5px;
        }
      }
    }
  }
}
</style>
